<template>
  <div style="width: 100%; height: 100%; display: flex; flex-direction: column">
    <div style="width: 100%; text-align: left; color: white; margin-top: 20px">
      平台管理
    </div>
    <div style="width: 100%; display: flex; flex-wrap: wrap; color: white">
      <div style="display: flex; align-items: center; margin: 0 20px">
        <div style="margin-right: 10px; width: 150px">添加新平台</div>
        <el-select
          @change="handleCommand"
          style="width: 110px"
          v-model="userPermissionForm.submitNewSystem"
          placeholder="请选择"
        >
          <el-option label="允许访问" :value="0"> </el-option>
          <el-option label="密码访问" :value="1"> </el-option>
          <el-option label="禁止访问" :value="2"> </el-option>
        </el-select>
      </div>
      <div style="display: flex; align-items: center; margin: 0 20px">
        <div style="margin-right: 10px; width: 150px">查询所有平台</div>
        <el-select
          @change="handleCommand"
          style="width: 110px"
          v-model="userPermissionForm.getAllSystems"
          placeholder="请选择"
        >
          <el-option label="允许访问" :value="0"> </el-option>
          <el-option label="密码访问" :value="1"> </el-option>
          <el-option label="禁止访问" :value="2"> </el-option>
        </el-select>
      </div>
      <div style="display: flex; align-items: center; margin: 0 20px">
        <div style="margin-right: 10px; width: 150px">查询平台详情</div>
        <el-select
          @change="handleCommand"
          style="width: 110px"
          v-model="userPermissionForm.getSystemById"
          placeholder="请选择"
        >
          <el-option label="允许访问" :value="0"> </el-option>
          <el-option label="密码访问" :value="1"> </el-option>
          <el-option label="禁止访问" :value="2"> </el-option>
        </el-select>
      </div>
      <div style="display: flex; align-items: center; margin: 0 20px">
        <div style="margin-right: 10px; width: 150px">更新已有平台</div>
        <el-select
          @change="handleCommand"
          style="width: 110px"
          v-model="userPermissionForm.updateSystemById"
          placeholder="请选择"
        >
          <el-option label="允许访问" :value="0"> </el-option>
          <el-option label="密码访问" :value="1"> </el-option>
          <el-option label="禁止访问" :value="2"> </el-option>
        </el-select>
      </div>
      <div style="display: flex; align-items: center; margin: 0 20px">
        <div style="margin-right: 10px; width: 150px">删除已有的平台</div>
        <el-select
          @change="handleCommand"
          style="width: 110px"
          v-model="userPermissionForm.deleteSystemById"
          placeholder="请选择"
        >
          <el-option label="允许访问" :value="0"> </el-option>
          <el-option label="密码访问" :value="1"> </el-option>
          <el-option label="禁止访问" :value="2"> </el-option>
        </el-select>
      </div>
      <div style="display: flex; align-items: center; margin: 0 20px">
        <div style="margin-right: 10px; width: 150px">查找特定平台</div>
        <el-select
          @change="handleCommand"
          style="width: 110px"
          v-model="userPermissionForm.searchSystemsByName"
          placeholder="请选择"
        >
          <el-option label="允许访问" :value="0"> </el-option>
          <el-option label="密码访问" :value="1"> </el-option>
          <el-option label="禁止访问" :value="2"> </el-option>
        </el-select>
      </div>
    </div>
    <div style="width: 100%; text-align: left; color: white; margin-top: 20px">
      系统管理
    </div>
    <div style="width: 100%; display: flex; flex-wrap: wrap; color: white">
      <div style="display: flex; align-items: center; margin: 0 20px">
        <div style="margin-right: 10px; width: 150px">更改语言</div>
        <el-select
          @change="handleCommand"
          style="width: 110px"
          v-model="userPermissionForm.changeLanguage"
          placeholder="请选择"
        >
          <el-option label="允许访问" :value="0"> </el-option>
          <el-option label="密码访问" :value="1"> </el-option>
          <el-option label="禁止访问" :value="2"> </el-option>
        </el-select>
      </div>
      <div style="display: flex; align-items: center; margin: 0 20px">
        <div style="margin-right: 10px; width: 150px">启用最小化</div>
        <el-select
          @change="handleCommand"
          style="width: 110px"
          v-model="userPermissionForm.changeMinimizeOnStartup"
          placeholder="请选择"
        >
          <el-option label="允许访问" :value="0"> </el-option>
          <el-option label="密码访问" :value="1"> </el-option>
          <el-option label="禁止访问" :value="2"> </el-option>
        </el-select>
      </div>
    </div>
    <div style="width: 100%; text-align: left; color: white; margin-top: 20px">
      页面管理
    </div>
    <div style="width: 100%; display: flex; flex-wrap: wrap; color: white">
      <div style="display: flex; align-items: center; margin: 0 20px">
        <div style="margin-right: 10px; width: 150px">创建页面</div>
        <el-select
          @change="handleCommand"
          style="width: 110px"
          v-model="userPermissionForm.saveNewPage"
          placeholder="请选择"
        >
          <el-option label="允许访问" :value="0"> </el-option>
          <el-option label="密码访问" :value="1"> </el-option>
          <el-option label="禁止访问" :value="2"> </el-option>
        </el-select>
      </div>
      <div style="display: flex; align-items: center; margin: 0 20px">
        <div style="margin-right: 10px; width: 150px">查询页面</div>
        <el-select
          @change="handleCommand"
          style="width: 110px"
          v-model="userPermissionForm.getPageInfoByPageName"
          placeholder="请选择"
        >
          <el-option label="允许访问" :value="0"> </el-option>
          <el-option label="密码访问" :value="1"> </el-option>
          <el-option label="禁止访问" :value="2"> </el-option>
        </el-select>
      </div>
      <div style="display: flex; align-items: center; margin: 0 20px">
        <div style="margin-right: 10px; width: 150px">更新页面</div>
        <el-select
          @change="handleCommand"
          style="width: 110px"
          v-model="userPermissionForm.updatePage"
          placeholder="请选择"
        >
          <el-option label="允许访问" :value="0"> </el-option>
          <el-option label="密码访问" :value="1"> </el-option>
          <el-option label="禁止访问" :value="2"> </el-option>
        </el-select>
      </div>
      <div style="display: flex; align-items: center; margin: 0 20px">
        <div style="margin-right: 10px; width: 150px">查询所有页面</div>
        <el-select
          @change="handleCommand"
          style="width: 110px"
          v-model="userPermissionForm.getAllPages"
          placeholder="请选择"
        >
          <el-option label="允许访问" :value="0"> </el-option>
          <el-option label="密码访问" :value="1"> </el-option>
          <el-option label="禁止访问" :value="2"> </el-option>
        </el-select>
      </div>
      <div style="display: flex; align-items: center; margin: 0 20px">
        <div style="margin-right: 10px; width: 150px">删除页面</div>
        <el-select
          @change="handleCommand"
          style="width: 110px"
          v-model="userPermissionForm.delPageByPageId"
          placeholder="请选择"
        >
          <el-option label="允许访问" :value="0"> </el-option>
          <el-option label="密码访问" :value="1"> </el-option>
          <el-option label="禁止访问" :value="2"> </el-option>
        </el-select>
      </div>
    </div>
    <div style="width: 100%; text-align: left; color: white; margin-top: 20px">
      计划任务管理
    </div>
    <div style="width: 100%; display: flex; flex-wrap: wrap; color: white">
      <div style="display: flex; align-items: center; margin: 0 20px">
        <div style="margin-right: 10px; width: 150px">创建计划任务</div>
        <el-select
          @change="handleCommand"
          style="width: 110px"
          v-model="userPermissionForm.saveNewScheduledTask"
          placeholder="请选择"
        >
          <el-option label="允许访问" :value="0"> </el-option>
          <el-option label="密码访问" :value="1"> </el-option>
          <el-option label="禁止访问" :value="2"> </el-option>
        </el-select>
      </div>
      <div style="display: flex; align-items: center; margin: 0 20px">
        <div style="margin-right: 10px; width: 150px">查询所有计划任务</div>
        <el-select
          @change="handleCommand"
          style="width: 110px"
          v-model="userPermissionForm.getAllScheduledTask"
          placeholder="请选择"
        >
          <el-option label="允许访问" :value="0"> </el-option>
          <el-option label="密码访问" :value="1"> </el-option>
          <el-option label="禁止访问" :value="2"> </el-option>
        </el-select>
      </div>
      <div style="display: flex; align-items: center; margin: 0 20px">
        <div style="margin-right: 10px; width: 150px">更新计划任务</div>
        <el-select
          @change="handleCommand"
          style="width: 110px"
          v-model="userPermissionForm.updateScheduledTaskById"
          placeholder="请选择"
        >
          <el-option label="允许访问" :value="0"> </el-option>
          <el-option label="密码访问" :value="1"> </el-option>
          <el-option label="禁止访问" :value="2"> </el-option>
        </el-select>
      </div>
      <div style="display: flex; align-items: center; margin: 0 20px">
        <div style="margin-right: 10px; width: 150px">删除计划任务</div>
        <el-select
          @change="handleCommand"
          style="width: 110px"
          v-model="userPermissionForm.delTaskById"
          placeholder="请选择"
        >
          <el-option label="允许访问" :value="0"> </el-option>
          <el-option label="密码访问" :value="1"> </el-option>
          <el-option label="禁止访问" :value="2"> </el-option>
        </el-select>
      </div>
    </div>
    <div style="width: 100%; text-align: left; color: white; margin-top: 20px">
      用户管理
    </div>
    <div style="width: 100%; display: flex; flex-wrap: wrap; color: white">
      <div style="display: flex; align-items: center; margin: 0 20px">
        <div style="margin-right: 10px; width: 150px">查询用户信息</div>
        <el-select
          @change="handleCommand"
          style="width: 110px"
          v-model="userPermissionForm.getUserPage"
          placeholder="请选择"
        >
          <el-option label="允许访问" :value="0"> </el-option>
          <el-option label="密码访问" :value="1"> </el-option>
          <el-option label="禁止访问" :value="2"> </el-option>
        </el-select>
      </div>
      <div style="display: flex; align-items: center; margin: 0 20px">
        <div style="margin-right: 10px; width: 150px">创建用户</div>
        <el-select
          @change="handleCommand"
          style="width: 110px"
          v-model="userPermissionForm.submitAddUser"
          placeholder="请选择"
        >
          <el-option label="允许访问" :value="0"> </el-option>
          <el-option label="密码访问" :value="1"> </el-option>
          <el-option label="禁止访问" :value="2"> </el-option>
        </el-select>
      </div>
      <div style="display: flex; align-items: center; margin: 0 20px">
        <div style="margin-right: 10px; width: 150px">查询用户权限</div>
        <el-select
          @change="handleCommand"
          style="width: 110px"
          v-model="userPermissionForm.getPermissionDetailByUserId"
          placeholder="请选择"
        >
          <el-option label="允许访问" :value="0"> </el-option>
          <el-option label="密码访问" :value="1"> </el-option>
          <el-option label="禁止访问" :value="2"> </el-option>
        </el-select>
      </div>
      <div style="display: flex; align-items: center; margin: 0 20px">
        <div style="margin-right: 10px; width: 150px">删除用户</div>
        <el-select
          @change="handleCommand"
          style="width: 110px"
          v-model="userPermissionForm.deleteUser"
          placeholder="请选择"
        >
          <el-option label="允许访问" :value="0"> </el-option>
          <el-option label="密码访问" :value="1"> </el-option>
          <el-option label="禁止访问" :value="2"> </el-option>
        </el-select>
      </div>
    </div>
  </div>
</template>

<script>
import eventBus from "../util/myEventBus";
import request from "../axios/request";
export default {
  data() {
    return {
      userPermissionForm: {
        userId: null,
        submitNewSystem: 0,
        getAllSystems: 0,
        getSystemById: 0,
        updateSystemById: 0,
        deleteSystemById: 0,
        searchSystemsByName: 0,
        changeLanguage: 0,
        changeMinimizeOnStartup: 0,
        saveNewPage: 0,
        getPageInfoByPageName: 0,
        updatePage: 0,
        getAllPages: 0,
        delPageByPageId: 0,
        saveNewScheduledTask: 0,
        getAllScheduledTask: 0,
        updateScheduledTaskById: 0,
        delTaskById: 0,
        getUserPage: 0,
        submitAddUser: 0,
        getPermissionDetailByUserId: 0,
        deleteUser: 0,
      },
    };
  },
  methods: {
    async handleCommand() {
      let res = await request({
        url: "/user/api/updatePermissionsByUserId",
        method: "POST",
        data: this.userPermissionForm,
      });
    },
    async getPermissionsByUserId() {
      this.$store.state.lastMethod = "getPermissionsByUserId";
      this.$store.state.lastData = null;
      let res = await request({
        url:
          "/user/api/getPermissionsByUserId/" + this.userPermissionForm.userId,
        method: "GET",
      });
      if (res.data.status == 200) {
        this.userPermissionForm = res.data.data;
      }
    },
  },
  mounted() {
    this.userPermissionForm.userId = this.$route.params.id;
    this.getPermissionsByUserId();
    eventBus.$on("getPermissionsByUserId", this.getPermissionsByUserId);
  },
  beforeDestroy() {
    eventBus.$off("getPermissionsByUserId");
  },
};
</script>

<style scoped></style>